import PropTypes from 'prop-types'
import { Col, Row, Button, Icon } from 'antd'
import { classnames } from 'utils'

import styles from './Overview.less'

const YQoverview = ({ info }) => {
  const { product_type, request_type, interface_address, version_id, function_total, interface_total, product_status } = info

  const handleAddress = (Addresses = []) => {
    return Addresses.map((item, index) => {
      if(index < 2) return <a href="javascript:;" key={index}>{item}<br /></a>
    })
  }

	return (
		<div className={styles.overviewWrap}>
			<div className={styles.title}>
        <div>总览</div>
        <div className={styles.buttons}>
          <Button icon="question"></Button>
          <Button icon="sync"></Button>
          <Button type="primary">报文头管理</Button>
        </div>
      </div>
      <Row className={styles.cards}>
        <Col span={6} className={styles.card}>
          <div className={styles.cardBox}>
            <div className={styles.cardTitle}>产品类型</div>
            <div className={classnames(styles.cardContent, styles.bigFont)}>
              <a href="javascript:;">{product_type}</a>
            </div>
          </div>
        </Col>
        
        <Col span={6} className={styles.card}>
          <div className={styles.cardBox}>
            <div className={styles.cardTitle}>通讯方式</div>
            <div className={classnames(styles.cardContent, styles.bigFont)}>
              {request_type && request_type.toUpperCase()}
            </div>
          </div>
        </Col>
        
        <Col span={8} className={styles.card}>
          <div className={styles.cardBox}>
            <div className={styles.cardTitle}>服务地址</div>
            <div className={classnames(styles.cardContent, styles.blue)}>
              <div style={{fontSize: 14}}>
                {handleAddress(interface_address)}
              </div>
            </div>
            <span className={styles.more}>更多</span>
          </div>
        </Col>
        
        <Col span={4} className={styles.card}>
          <div className={classnames(styles.cardBox)}>
            <div className={styles.cardTitle}>版本号</div>
            <div className={classnames(styles.cardContent, styles.blue)} style={{ fontSize: 24 }}>
              <a href="javascript:;">{version_id}</a>
            </div>
          </div>
        </Col>
      </Row>

      <Row style={{ marginTop: 15 }}><Col span={20}>
        <Row className={styles.cards}>
          <Col span={8} className={styles.card}>
            <div className={styles.cardBox}>
              <div className={styles.cardTitle}>功能总数</div>
              <div className={classnames(styles.cardContent)}>
                <div><span className={classnames(styles.numFont)}>
                  <a href="javascript:;">{function_total}</a>
                </span>个</div>
              </div>
            </div>
          </Col>
          <Col span={8} className={styles.card}>
            <div className={styles.cardBox}>
              <div className={styles.cardTitle}>接口总数</div>
              <div className={classnames(styles.cardContent)}>
                <div><span className={classnames(styles.numFont)}>
                  <a href="javascript:;">{interface_total}</a>
                </span>个</div>
              </div>
            </div>
          </Col>
          <Col span={8} className={styles.card}>
            <div className={styles.cardBox}>
              <div className={styles.cardTitle}>产品状态</div>
              <div className={classnames(styles.cardContent)}>
                <div>
                  <div className={classnames({ [styles.start]: product_status === 'enable', [styles.stop]: product_status === 'disable' })}>
                    <Icon type="poweroff" /> { product_status === 'enable'? "启用" : product_status === 'disable'? "停止" : "" }
                  </div>
                  <Button type="primary" size="small">{ product_status === 'enable'? "停止" : product_status === 'disable'? "启用": "" }</Button>
                </div>
              </div>
            </div>
          </Col>
        </Row>
      </Col></Row>
		</div>
	)
}

YQoverview.propTypes = {
  info: PropTypes.object, 
}

export default YQoverview